<template>
  <Scroll id="tab-menu">
    <div class="menu-list">
      <div class="menu-list-item"
           :class="[index===currentIndex?'active':'']"
           v-for="(item, index) in categories"
           :key="index"
           @click='itemClick(index,item.maitKey)'
           >
        {{item.title}}
      </div>
    </div>
  </Scroll>
</template>

<script>
  
  import Scroll from 'components/common/Scroll/Scroll';
	export default {
		name: "TabMenu",
    components: {
		  Scroll
    },
    props: {
		  categories: Array
    },
    data() {
		  return {
            currentIndex: 0,
      }
    },
    methods: {
		  itemClick(index,maitKey) {
        this.currentIndex = index
        this.$emit('selectItem', this.currentIndex)
      }
    }
	}
</script>

<style lang="less" scoped>
 /* #tab-menu {  */
    
    /* height: 100%; */
    /*  */
    /* box-sizing: border-box;  */
   /* }  */

  .menu-list-item {
    background-color: #f6f6f6;
    width: 80px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 14px;
  }

  .active {
    font-weight: 700;
    color: red;
    background-color: #fff;
    border-left: 3px solid pink;
  } 
</style>
